<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				登录/注册
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号</text>
					<input type="text" v-model="username" placeholder="请输入手机号" maxlength="11" />
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<input type="text" v-model="password" placeholder="请输入验证码" placeholder-class="input-empty"
						maxlength="20" password @confirm="toLogin" />
					<button :class="codeTime !== 0 ? 'code code-disable' : 'code'"
						:disabled="codeTime !== 0 || username.length !== 11" @click="getCode">
						{{ codeTime === 0 ? '获取验证码' : codeTime }}
					</button>
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
			<!-- <button class="confirm-btn2" @click="toRegist" >获取体验账号</button> -->
			<!-- <view class="forget-section" @click="toRegist">
				忘记密码?
			</view> -->
		</view>
		<!-- <view class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view> -->
	</view>
</template>

<script>
import {
	mapMutations
} from 'vuex';
import {
	memberLogin, memberInfo, getAuthCode
} from '@/api/member.js';
export default {
	data() {
		return {
			codeTime: 0,
			codeInterval: null,
			username: '',
			password: '',
			logining: false
		}
	},
	onLoad() {
		this.username = uni.getStorageSync('username') || '';
		this.password = uni.getStorageSync('password') || '';
	},
	methods: {
		...mapMutations(['login']),
		navBack() {
			uni.navigateBack();
		},
		toRegist() {
			uni.navigateTo({ url: '/pages/public/register' });
		},
		getCode() {
			if (this.codeTime !== 0) return
			getAuthCode(this.username).then(response => {
				this.codeTime = 10
				this.codeInterval = setInterval(() => {
					this.codeTime = this.codeTime - 1
					if (this.codeTime === 0) {
						clearInterval(this.codeInterval)
					}
				}, 1000)
			})

		},
		async toLogin() {
			this.logining = true;
			memberLogin({
				username: this.username,
				password: this.password
			}).then(response => {
				let token = response.data.tokenHead + response.data.token;
				uni.setStorageSync('token', token);
				uni.setStorageSync('username', this.username);
				uni.setStorageSync('password', this.password);
				memberInfo().then(response => {
					this.login(response.data);
					uni.navigateBack();
				});
			}).catch(() => {
				this.logining = false;
			});
		},
	},

}
</script>

<style lang='scss'>
page {
	background: #fff;
}

.container {
	padding-top: 115px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}

.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	padding-bottom: 40upx;
}

.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}

.left-top-sign {
	font-size: 120upx;
	color: $page-color-base;
	position: relative;
	left: -16upx;
}

.right-top-sign {
	position: absolute;
	top: 80upx;
	right: -30upx;
	z-index: 95;

	&:before,
	&:after {
		display: block;
		content: "";
		width: 400upx;
		height: 80upx;
		background: #b4f3e2;
	}

	&:before {
		transform: rotate(50deg);
		border-radius: 0 50px 0 0;
	}

	&:after {
		position: absolute;
		right: -198upx;
		top: 0;
		transform: rotate(-50deg);
		border-radius: 50px 0 0 0;
		/* background: pink; */
	}
}

.left-bottom-sign {
	position: absolute;
	left: -270upx;
	bottom: -320upx;
	border: 100upx solid #d0d1fd;
	border-radius: 50%;
	padding: 180upx;
}

.welcome {
	position: relative;
	left: 50upx;
	top: -90upx;
	font-size: 46upx;
	color: #555;
	text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
}

.input-content {
	padding: 0 60upx;
}

.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	height: 120upx;
	border-radius: 4px;
	margin-bottom: 50upx;
	position: relative;


	.tit {
		height: 50upx;
		line-height: 56upx;
		font-size: $font-sm+2upx;
		color: $font-color-base;
	}

	input {
		height: 60upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
	}

	.code {
		position: absolute;
		border: none;
		outline: none;
		right: 10upx;
		font-size: 5upx;
		line-height: 60upx;
		padding-left: 2upx;
		padding-right: 2upx;
		width: 150upx;
		height: 60upx;
		background-color: #4080FF;
		color: #fff;
		font-size: 24upx;

		&-disable {
			background-color: #f8f8f8;
			color: #555;
		}

	}
}

.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	margin-top: 70upx;
	background: $uni-color-primary;
	color: #fff;
	font-size: $font-lg;

	&:after {
		border-radius: 100px;
	}
}

.confirm-btn2 {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	margin-top: 40upx;
	background: $uni-color-primary;
	color: #fff;
	font-size: $font-lg;

	&:after {
		border-radius: 100px;
	}
}

.forget-section {
	font-size: $font-sm+2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 40upx;
}

.register-section {
	position: absolute;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: $font-sm+2upx;
	color: $font-color-base;
	text-align: center;

	text {
		color: $font-color-spec;
		margin-left: 10upx;
	}
}
</style>
